<template>
    <div id="treemap" style="width: 100%; height: 600px"></div>
</template>
<script>
import * as echarts from 'echarts';
import treeData from '@/json/treeData.json'
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.drawChart()
    },
    methods: {
        drawChart() {
            // 获取dom元素
            let myChart = echarts.init(document.getElementById('treemap'));
            var option = {
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#666' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#000' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                title: {
                    text: '{a|一级节点总数：3}  {b|二级节点总数：11}  {c|三级节点总数：23}',
                    left: 40,
                    top: 30,
                    textStyle: {
                        rich: {
                            a: {
                                color: '#fff',
                                fontSize: 18
                            },
                            b: {
                                color: '#fff',
                                fontSize: 18
                            },
                            c: {
                                color: '#fff',
                                fontSize: 18
                            }
                        }
                    }
                },
                legend: {},
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',
                        data: [treeData],
                        symbolSize: 10,
                        edgeShape: 'polyline',
                        edgeForkPosition: '63%',
                        initialTreeDepth: 3,
                        lineStyle: { color: '#337ce9' },
                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 12,
                            lineHeight: 24,
                            formatter: function (params) {
                                if (params.data.level === 1) {
                                    return '{a|' + params.name + '}'
                                } else if (params.data.level === 2) {
                                    return '{b|' + params.name + '}'
                                } else if (params.data.level === 3) {
                                    return '{c|' + params.name + '}'
                                } else {
                                    return '{d|' + params.name + '}'
                                }
                            },
                            rich: {
                                a: {
                                    padding: 7,
                                    borderRadius: 3,
                                    color: '#fff',
                                    backgroundColor: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0, color: '#007dfe' // 左侧阴影颜色
                                        }, {
                                            offset: 1, color: '#01d6e0' // 右侧透明
                                        }],
                                        global: false
                                    },
                                    textShadow: '1px 0px 3px rgba(0,0,0,0.3)' // 轻微的右侧阴影
                                },
                                b: {
                                    padding: 7,
                                    borderRadius: 3,
                                    color: '#fff',
                                    backgroundColor: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0, color: '#349c1e' // 左侧阴影颜色
                                        }, {
                                            offset: 1, color: '#99f6c2' // 右侧透明
                                        }],
                                        global: false
                                    },
                                    textShadow: '1px 0px 3px rgba(0,0,0,0.3)' // 轻微的右侧阴影
                                },
                                c: {
                                    padding: 7,
                                    borderRadius: 3,
                                    color: '#fff',
                                    backgroundColor: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0, color: '#ff9466' // 左侧阴影颜色
                                        }, {
                                            offset: 1, color: '#fddfa9' // 右侧透明
                                        }],
                                        global: false
                                    },
                                    textShadow: '1px 0px 3px rgba(0,0,0,0.3)' // 轻微的右侧阴影
                                },
                                d: {
                                    padding: 10,
                                    borderRadius: 3,
                                    color: '#fff',
                                    fontSize: 18,
                                    backgroundColor: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0, color: '#007dfe' // 左侧阴影颜色
                                        }, {
                                            offset: 1, color: '#01d6e0' // 右侧透明
                                        }],
                                        global: false
                                    },
                                    textShadow: '1px 0px 3px rgba(0,0,0,0.3)' // 轻微的右侧阴影
                                }
                            }
                        },
                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },
                        emphasis: {
                            focus: 'descendant'
                        },
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }]
            };
            myChart.setOption(option);
        }
    }
}
</script>

